<template>
  <customDrawer
    :title="title" :subtitle="subtitle" ref="customDrawer"
    :footer="false" :widthPer="widthPer" :attach="attach"
    :placement="placement" :zIndex="9000"
    :widthPx="widthPx" :heightPx="heightPx"
    :classAppend="'vxe-table-clear-actived table-drawer-page-size-' + propPageSize"
    @show="_customDrawerShow"
  >
    <template #content>
      <!--顶部插槽-->
      <slot name="contentTop"></slot>
      <data-view
        :propViewKey="viewKey"
        :propAutoFetchData="false"
        :propOnlyQueryAll="propOnlyQueryAll"
        :propOnlyQuery="true"
        :propShowRadiobox="cpShowRadiobox"
        :propShowCheckbox="cpShowCheckbox"
        :propShowChildCheckbox="propShowChildCheckbox"
        :propPageSize="propPageSize"
        :propUserParam="propUserParam"
        ref="dataView"
        @after-load="_afterLoad"
        @view-ready="_viewReady"
        v-show="isRender"
        v-if="isOpen"
        @extra-button-click="_extraButtonClick"
        @current-change="_currentChange"
        :propSubHeight="150"
      />
    </template>
  </customDrawer>
</template>

<script>
export default {
  desc: '弹框表格选择控件',
  name: 'tableDrawer',
  components: {
  },
  props: {
    /**
     * @Description：标题
     * @Date 2023-10-10
     */
    title: {
      type: String,
      default: () => '请选择',
    },
    /**
     * @Description：子标题
     * @Date 2023-10-10
     */
    subtitle: {
      type: String,
      default: () => '',
    },
    /**
     * @Description：列表配置标志
     * @Date 2023-10-10
     */
    viewKey: {
      type: String,
      required: true,
      default: () => ''
    },
    /**
     * @Description：组件标志，多个组件公用一个回调函数时可以使用进行判断
     * @Date 2023-10-10
     */
    refName: {
      type: String,
      default: () => ''
    },
    /**
     * @Description：显示单选按钮
     * @Date 2023-10-10
     */
    showRadiobox: {
      type: Boolean,
      default: () => true
    },
    /**
     * @Description：显示复选按钮
     * @Date 2023-10-10
     */
    showCheckbox: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：查询条件
     * @Date 2023-10-10
     */
    queryWrapper: {
      type: Object,
      default: () => null
    },
    /**
     * @Description：true 强制加载数据，否则只加载一次
     * @Date 2023-10-10
     */
    loadForce: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：true 只读
     * @Date 2023-10-10
     */
    propOnlyQueryAll: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：true 显示展开子表格的复选框
     * @Date 2023-10-10
     */
    propShowChildCheckbox: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：宽度，可取  50 80 100 600
     * @Date 2023-10-10
     */
    widthPer: {
      type: [Number, String],
      default: () => 50,
    },
    /**
     * @Description：抽屉方向。可选项：left/right/top/bottom
     * @Date 2023-10-18
     */
    placement: {
      type: String,
      default: () => 'top',
    },
    /**
     * @Description：宽度，优先级最高
     * @Date 2023-10-22
     */
    widthPx: {
      type: Number,
      default: () => 800,
    },
    /**
     * @Description：高度，优先级最高
     * @Date 2023-10-22
     */
    heightPx: {
      type: Number,
      default: () => 610,
    },
    /**
     * @Description：每页显示数量，如果传递的话，将强制使用传递的数值 现在最多每页显示500条,不分页传值为-1
     * @Date 2023-10-22
     */
    propPageSize: {
      type: Number,
      default: () => 10,
    },
    /**
     * @Description：用户固定参数
     * @Date 2023-10-22
     */
    propUserParam: {
      type: Object,
      default: () => {},
    },
    /**
     * @Description：抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时, body 则挂在最外层
     * @Date 2023-10-18
     */
    attach: {
      type: String,
      default: () => undefined,
    },
    /**
     * @Description：确认前操作
     * @Date 2023-10-18
     */
    propBeforeConfirm: {
      type: Function,
      default: () => () => {
        return true
      },
    }
  },
  created() {
  },
  data() {
    return {
      // 弹框是否打开过
      isOpen: false,
      // 表格是否渲染过
      isRender: false,
      // 表格数据是否加载过
      isLoad: false,
      // 确认回调函数
      confirmCall: null,

      // 是否多选
      isShowMore: false
    }
  },
  methods: {
    /**
     * @Description：显示-单选按钮
     * @Date 2023-10-13
     * @param confirmCall 确认回调函数
     * @param isShowMore true 显示多选
     */
    show(confirmCall, isShowMore = false) {
      this.confirmCall = confirmCall
      this.$set(this, 'isShowMore', isShowMore)
      if (this.isRender) {
        // 清除单选选中
        if (this.showRadiobox) {
          this.getDvInst().getGrid().clearRadioRow()
        } else if (this.showCheckbox) { // 清除复选选中
          this.getDvInst().getGrid().clearCheckboxRow()
        }
        // 清除行高亮选中
        this.getDvInst().getGrid().clearCurrentRow()
      }
      this.$refs.customDrawer.show()

      if (this.loadForce) {
        setTimeout(() => {
          this.getDvInst().setQueryWrapper(this.queryWrapper)
        }, 500)
      }
    },
    /**
     * @Description：弹框显示后
     * @Date 2023-10-13
     */
    _customDrawerShow() {
      this.isOpen = true
    },
    /**
     * @Description：隐藏
     * @Date 2023-10-13
     */
    hide() {
      this.$refs.customDrawer.hide()
    },
    // 表格实例
    getDvInst() {
      return this.$refs.dataView
    },

    // 结构渲染完毕
    _viewReady() {
      this.isRender = true
      if (this.cpShowCheckbox) {
        this.getDvInst().ocSetShowRadioBox(false)
        this.getDvInst().ocSetShowCheckBox(true)
      } else{
        this.getDvInst().ocSetShowCheckBox(false)
        this.getDvInst().ocSetShowRadioBox(true)
      }
    },

    // 数据加载完毕
    _afterLoad() {
      this.isLoad = true
    },

    // 行选中之后
    _currentChange({row}) {
    },

    // 点击事件
    _extraButtonClick(para) {
      let buttonKey = para.button.key
      // eslint-disable-next-line default-case
      switch (buttonKey) {
      //关闭
      case 'close': {
        this.hide()
        break
      }

      //确认选择
      case 'confirm': {
        if (this.propBeforeConfirm != null && !this.propBeforeConfirm()) {
          return
        }
        if (this.cpShowRadiobox) {
          let select = this.getDvInst().getGrid().getRadioRecord()
          if (select) {
            this.$emit('confirm', this.getData(), this.refName)
            if (this.confirmCall) {
              this.confirmCall(this.getData(), this.refName)
            }
          }
        } else if (this.cpShowCheckbox) {
          let selectList = this.getDvInst().getGrid().getCheckboxRecords()
          if (selectList && selectList.length > 0) {
            this.$emit('confirm', this.getData(), this.refName)
            if (this.confirmCall) {
              this.confirmCall(this.getData(), this.refName)
            }
          }
        }
        this.hide()
        break
      }

      // 清除
      case 'clear': {
        this.getDvInst().getGrid().clearAll()
        break
      }
      }
    },

    // 获取所选中的数据
    getData() {
      if (this.cpShowRadiobox) {
        let select = this.getDvInst().getGrid().getRadioRecord()
        if (select) {
          return JSON.parse(JSON.stringify(select))
        }
      } else if (this.cpShowCheckbox) {
        let selectList = this.getDvInst().getGrid().getCheckboxRecords()
        if (selectList && selectList.length > 0) {
          return JSON.parse(JSON.stringify(selectList))
        }
      }
      return null
    }
  },
  watch: {
    // 渲染结束加载数据,仅加载一次
    isRender: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        if (this.isRender && !this.isLoad && !this.loadForce) {
          this.getDvInst().setQueryWrapper(this.queryWrapper)
        }
      },
    }
  },
  computed: {
    // 是否显示单选框
    cpShowRadiobox() {
      return !this.isShowMore
    },
    // 是否显示复选框
    cpShowCheckbox() {
      return this.isShowMore
    }
  }
}
</script>

<style lang="scss">
  .table-drawer-page-size-10 .vxe-table--body-wrapper{
    max-height: 360px !important;
    overflow: auto !important;
  }
</style>
